<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="attributeName" label="属性名" width="180" />
    <el-table-column prop="desc" label="说明" width="" />
    <el-table-column prop="defaultValue" label="默认值" width="180" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = ref([
  {
    attributeName: "formOption",
    desc: "定义对象包含配置项",
    defaultValue: "-",
  },
  {
    attributeName: "columns",
    desc: "需要定义的字段数组",
    defaultValue: "-",
  },
  {
    attributeName: "prop",
    desc: "双向绑定的属性名",
    defaultValue: "-",
  },
  {
    attributeName: "label",
    desc: "名称",
    defaultValue: "-",
  },
  {
    attributeName: "type",
    desc: "type是指定当前是需要什么类型的组件, 当下组件类型有: input | text | number | treeSelect | select | radio | switch | date | datetime | datetimerange | textarea",
    defaultValue: "input",
  },
  {
    attributeName: "rules",
    desc: "校验规则rules:[{ required: true, message: '年龄不能为空', trigger: 'blur' }]",
    defaultValue: "-",
  },
  {
    attributeName: "dicData",
    desc: "dicData属性为下拉/单选框提供，固定格式为dicData: [{ label: '男', value: '1' }]",
    defaultValue: "-",
  },
  {
    attributeName: "descAlign",
    desc: "只读表单字段位置",
    defaultValue: "left",
  },
  {
    attributeName: "lineClamp",
    desc: "只读表单溢出隐藏...",
    defaultValue: "",
  },
  {
    attributeName: "display",
    desc: "通过css样式动态控制显示隐藏 可选值 block | none",
    defaultValue: "block",
  },
]);
</script>

<style>
</style>